<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工程师管理</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all"/>
    <style>
        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {

            vertical-align: middle;

        }
        /*.table {*/
        /*width:2000px;*/
        /*max-width:8000px;*/

        /*}*/
    </style>
</head>
<body>
<div id="app" style="padding:10px;">
    <div id="tu" v-if="currentPicURL" style="text-align:center;position:fixed;width:100%;z-index:9999">
        <img  :src="currentPicURL"
             style="transition:all .6s" id="datu" title="单击选装" onclick="xuanzhuan()"/>
        <div style="position:fixed;bottom:0px;z-index:5000"><button type="button" @click="currentPicURL=''" class="layui-btn" >关闭</button></div>
    </div>
    <script>
        var dushu = 0;
        function xuanzhuan(){
            dushu+=90;
           // alert(dushu)
            datu.style.transform = 'rotate('+dushu+'deg)'
        }
    </script>

    <table class="table table-striped" >
        <thead>
        <tr>
            <th width="50">序号</th>
            <th width="100">唯一识别码</th>
            <th>工程师姓名</th>
            <th>工程师手机号</th>
            <th>工程师身份证正面</th>
            <th>工程师身份证正面</th>
            <th>工程师身份证头像</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="b in bxms">
            <td>{{b.id}}</td>
            <td>{{b.openid}}</td>
            <td>{{b.name?b.name:'匿名'}}</td>
            <td>{{b.tel?b.tel:'未提供'}}</td>

            <td><img
                    @click="showBigPic(b.id_zheng)"

                    width="50" :src="b.id_zheng?b.id_zheng:'../../images/zhizhao.png'"
                    width="90%"/></td>
            <td><img
                    @click="showBigPic(b.id_fan)"

                    width="50" :src="b.id_fan?b.id_fan:'../../images/zhizhao.png'"
                    width="90%"/></td>
            <td><img
                    @click="showBigPic(b.person_pic)"

                    width="50" :src="b.person_pic?b.person_pic:'../../images/zhizhao.png'"
                    width="90%"/></td>
            <td>{{['待审核','启用','禁用','拒绝'][b.status]}}</td>
            <td>
                <div v-if="b.status==0||b.status==3">
                    <button type="button" class="layui-btn" @click="shenhe(b.id,1)">审核通过</button>
                    <button type="button" class="layui-btn layui-btn-danger" @click="shenhe(b.id,3)">审核拒绝</button>
                </div>
                <div v-else-if="b.status==1">
                <button type="button"  class="layui-btn" @click="shenhe(b.id,2)">禁用</button>
                <button type="button"  class="layui-btn" @click="wxhistory(b.id)">维修记录</button>
                </div>
                <button type="button" v-else-if="b.status==2" class="layui-btn" @click="shenhe(b.id,1)">启用</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div style="text-align:center;padding:20px;">{{ loadingtxt}}</div>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script>

//   window.onload = function() {
//       var imgs = document.getElementsByTagName("img");
//       alert(imgs.length);
//       for (var i = 0; i < imgs.length; i++) {
//        //   console.log(imgs[i]);
//           imgs[i].onload = function () {
//               console.log(imgs[i]);
//           }
//       }
//  };

    layui.use('layer');

    var v = new Vue({
        el: "#app",
        data: {
            currentPicURL: '',
            p: 1,
            size: 10,
            bxms: [],
            total: 0,
            pages: 0,
            loadingtxt:'拼命加载中...'
        },
        methods: {
            showBigPic: function (url) {
                this.currentPicURL = url ? url : '../../images/zhizhao.png'
            },
            shenhe: function (id, status) {
                if(status==3){
                    layer.open({
                        //打开新窗口
                        title: '系统提示'
                        ,content: '<div style="text-align:center"><input id="reject" placeholder="拒绝原因" /></div>',
                         yes:function(){
                            $.get("/rm_shenhe", {bxm_id: id, status: status,rejectMsg:reject.value},
                                function (data) {
                                    if (data==true) {
                                        layer.msg('设置成功！',{
                                            icon:1,
                                            time:1000
                                        },function(){
                                            location.reload();
                                        });
                                        loadData();
                                    }
                                })
                            layer.closeAll();
                        }
                    });
                }else {
                    $.get("/rm_shenhe", {bxm_id: id, status: status}, function (data) {
                        if (data==true) {
                            layer.msg('操作成功', {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                location.reload();
                            });
                            loadData();

                        }
                    })
                }
            },
            wxhistory:function(id){
                layer.open({
                    //打开新窗口
                    title: '查看维修记录',
                    yes:function(){
                        window.location.href="wxhistory.html?"+id;
                        layer.closeAll();
                    }
                });
            }
        }
    });

    loadData(v.p);



    function loadData(i) {
        if(v.loadingtxt=="我也是有底线的"){
            return ;
        }
        $.get("/find_top_repair_man", {p:i, size: v.size}, function (data) {
            console.log(data);
            v.total = data.totalElements;
            v.pages = data.totalPages;
            if(data.content.length==0){
                v.loadingtxt = "我也是有底线的"
            }
            v.bxms = v.bxms.concat(data.content);
        })
    }

    window.onscroll = function(){
        var ch = document.documentElement.clientHeight||document.body.clientHeight;
        var sh = document.documentElement.scrollHeight||document.body.scrollHeight;
        var st=  document.documentElement.scrollTop||document.body.scrollTop;
        //console.log(Math.ceil(ch+st)+" "+ Math.ceil(sh))
        if(Math.abs(ch+st-sh)<1){
            v.p++;
            loadData(v.p);
        }
    }
</script>
</body>
</html>